<template>
  <div class="layer-box">
    <!-- 上方按钮 -->

    <!-- 下方按钮 -->
    <div class="btn-bottom">
      <div class="btn-top-heard" @click="searchBtn(2)">
        <span class="btn-img-left btn-img-left1"></span>
        <span class="btn-text">计算成果图层</span>
        <span class="btn-img-right" :class="{ active: btnShow === 2 ? true : false }"></span>
      </div>
      <div class="btn-top-body" v-if="btnShow === 2">
        <div class="title">水文计算特征成果</div>
        <el-radio-group v-model="state.radioValue" @change="handleChangeRadio">
          <el-radio v-for="(item, index) in baseLayerData" :label="item.id" :key="index">{{
            item.label
          }}</el-radio>
        </el-radio-group>
        <div class="title">水文计算时刻成果</div>
        <el-checkbox-group v-model="state.swResArr" @change="handleCheckSW">
          <el-checkbox label="1">预报对象时刻雨量</el-checkbox>
          <el-checkbox label="2">预报对象时刻流量</el-checkbox>
          <el-checkbox label="3">河道时刻流量</el-checkbox>
        </el-checkbox-group>
        <div class="title">水动力成果</div>
        <el-checkbox-group v-model="state.checkList">
          <el-checkbox label="断面水深" />
          <el-checkbox label="洪水淹没" />
        </el-checkbox-group>
      </div>
    </div>
    <div class="btn-top">
      <div class="btn-top-heard" @click="searchBtn(1)">
        <span class="btn-img-left"></span>
        <span class="btn-text">矢量图层</span>
        <span class="btn-img-right" :class="{ active: btnShow === 1 ? true : false }"></span>
      </div>
      <div class="btn-top-body" v-if="btnShow === 1">
        <el-checkbox-group v-model="state.checkList">
          <el-checkbox
            v-for="(item, index) in vectorLayerData"
            :key="index"
            :label="item.label"
            v-model="state.checkedVal"
            @change="handleChangeTree($event, item.key)"
          >
            <div class="check-flex">
              <span class="check-flex-font">{{ item.label }}</span>
              <span class="img-box">
                <img :src="getModelTree(item.icon)" />
              </span>
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import emitter from '@/utils/bus'
import { getModelTree } from '@/utils/loadAssets'
//添加JSON
import service_layers from '@/assets/data/map_data/dispach_manage.json'

const btnShow = ref(0)
const imgTop = ref(false)
const imgBottom = ref(false)
const state = reactive({
  swResArr: [],
  checkedVal: true,
  radioValue: '',
  radioName: '',
  checkList: ['预报对象', '拓扑结构', '河道', '计算单元', '小流域', '节点', '雨量站']
})
const vectorLayerData = reactive(service_layers.vectorLayers)
const baseLayerData = reactive(service_layers.baseMapLayers)
const vectorLayerCheckChange = (data, checked, indeterminate) => {
  if (data.lyType != undefined) {
    const item = {
      id: data.id,
      name: data.label,
      lyType: data.lyType,
      lyIndex: data.lyIndex,
      url: data.url,
      isShow: checked
    }
    emitter.emit('layerOperation', item)
  }
}
const baseMapLayerCheckChange = (data, checked, indeterminate) => {
  console.log(data)
  if (data.lyType != undefined) {
    const item = {
      id: data.id,
      name: data.label,
      lyType: data.lyType,
      lyIndex: data.lyIndex,
      url: data.url,
      isShow: checked
    }
    emitter.emit('layerOperation', item)
  }
}
const searchBtn = (index) => {
  if (btnShow.value === index) {
    btnShow.value = 0

    return
  }
  btnShow.value = index
}
const emit = defineEmits(['handleRadioName', 'handleChangeTree', 'checkedSW'])
function handleChangeTree(event, item) {
  emit('handleChangeTree', { event: event, item: item })
}
function handleCheckSW(val) {
  state.swResArr = [val[val.length - 1]]
  emit('checkedSW', state.swResArr)
}
// 选择计算成果图层
const handleChangeRadio = (val) => {
  console.log(baseLayerData, val, 6666)

  state.radioName = baseLayerData.filter((num) => {
    return num?.id == val
  })
  // state.radioName = name[0].label;
  console.log(state.radioName, 9999)
  // 传入父组件
  emit('handleRadioName', state.radioName)
}
</script>

<style lang="less" scoped>
.layer-box {
  width: 100%;
  height: 100%;
  // 上方按钮
  .btn-top-heard {
    width: 100%;
    height: 40px;
    background-color: #ffff;
    border: 1px solid rgba(22, 155, 213, 1);
    border-radius: 5px 5px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

    .btn-img-left {
      height: 27px;
      width: 27px;
      margin-left: 8px;
      background: url('@/assets/images/basicsConfig/u17.png') no-repeat;
      background-size: 100% 100%;
    }
    .btn-img-left1 {
      background: url('@/assets/images/basicsConfig/u8.png') no-repeat;
      background-size: 100% 100%;
    }

    .btn-text {
      color: blue;
    }
    .btn-img-right {
      height: 27px;
      width: 27px;
      margin-right: 8px;
      background: url('@/assets/images/basicsConfig/u7.png') no-repeat;
      background-size: 100% 100%;
    }
    .active {
      background: url('@/assets/images/basicsConfig/u6.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .btn-top {
    width: 100%;
    height: auto;
    margin-left: 10px;
    margin-bottom: 0px;
    .btn-top-body {
      width: 100%;
      height: 270px;
      // background-color: #ffffff;
      background: rgba(255, 255, 255, 0.7);
      overflow-y: auto;
      border: 1px solid rgba(22, 155, 213, 1);
      border-top: 0px;

      .check-flex {
        display: flex;
        align-items: center;
        .check-flex-font {
          width: 50px;
        }
        .img-box {
          margin-left: 20px;
        }
      }
      :deep(.el-checkbox) {
        display: flex;
        margin: 0 auto;
        justify-content: space-between;
        width: 120px;
      }
      :deep(.el-tree) {
        background: transparent;
      }
      .custom-tree-node {
        display: flex;
        .title-item {
          width: 80px;
        }
        .img-box {
          margin-left: 10px;
          width: 20px;
          height: 20px;
          img {
            width: 20px;
            height: 20px;
          }
        }
      }
    }
  }
  .btn-bottom {
    margin-left: 10px;
    width: 100%;
    margin-bottom: 20px;
    .btn-top-body {
      box-sizing: border-box;
      padding-left: 10px;
      width: 100%;
      height: 270px;
      border: 1px solid rgba(22, 155, 213, 1);
      // background-color: #ffffff;
      background: rgba(255, 255, 255, 0.7);
      border-top: 0px;
      overflow-y: auto;
      .title {
        margin-top: 5px;
        color: #409eff;
      }
      .el-checkbox-group {
      }
      .el-radio-group {
        margin-left: 1px;
      }
      :deep(.el-tree) {
        background: transparent;
      }
    }
  }
}
</style>
